<!-- 一个课程显示对象 组件 -->

<template>
	<focus-box width="750" mode="col" justify="start" align="center">
		
		<!-- 顶部间隔线 -->
		<focus-line v-if="isLine==true||isLine=='true'" length="686" color="info-light"></focus-line>
		
		<!-- 课程item块 -->
		<focus-box width="750" height="178" :padding="[24,32]"
		mode="row" justify="between" align="center" @click="itemClick">
			
			<!-- 课程图片容器 -->
			<focus-box width="216" height="130">
				<image :src="img" mode="aspectFill"
				style="width:216rpx; height:130rpx; border-radius:8rpx;"></image>
			</focus-box>
			
			<!-- 课程文字信息容器 -->
			<focus-box width="446" height="130" mode="col" justify="center" align="start">
				
				<!-- 课程标题容器 -->
				<focus-box width="446" mode="row" justify="start" align="center">
					<!-- 必/选修标签 -->
					<tag-course :type="type"></tag-course>
					<!-- 间隔 -->
					<focus-box width="16" height="10"></focus-box>
					<!-- 标题文字 -->
					<focus-text size="30" color="black" lines="1" weight="bold" :text="caption"></focus-text>
				</focus-box>
				
				<!-- 间隔 -->
				<focus-box width="100" height="20"></focus-box>
				
				<!-- 学分状态容器 -->
				<focus-box width="446" mode="row" justify="start" align="center">
					<!-- 课程学分 -->
					<focus-text size="26" color="remark" text="课程学分："></focus-text>
					<focus-text size="30" color="error" lines="1" :text="obtained+'/'+total+'分'"></focus-text>
					<!-- 间隔 -->
					<focus-box width="10" height="10"></focus-box>
					<!-- 标签 -->
					<u-tag v-if="state==1" type="warning" size="mini" :text="statxt"></u-tag>
					<u-tag v-else-if="state==2" type="success" size="mini" :text="statxt"></u-tag>
					<u-tag v-else type="info" size="mini" :text="statxt"></u-tag>
				</focus-box>
				
			</focus-box>
			
		</focus-box>
		
		<!-- ============================================= 弹出层 -->
		<!-- 通用信息模态框 -->
		<modal-info
			ref="myModalInfoDjy"
			:tag="toast.list[toast.index].tag"
			:mode="toast.list[toast.index].mode"
			:title="toast.list[toast.index].title"
			:content="toast.list[toast.index].content"
			:confirmText="toast.list[toast.index].confirmText"
			:cancelText="toast.list[toast.index].cancelText"
			@confirm="onConfirm"
			@cancel="onCancelCall"
		></modal-info>
		
	</focus-box>
</template>

<script>
	// 通用方法引入
	import project from '@/common/js/public/project.js';
	// 接口请求文件引入
	import request from '@/pagesB/common/js/request/userInfo.js';
	
	/**
	 * 一个课程显示对象组件
	 * @description 一个课程显示对象组件，杜先生开发
	 * @property {String} tag 组件标识：course-item
	 * @property {String,Number} courseid 课程ID
	 * @property {String,Number} jieid 小节ID
	 * @property {String,Boolean} isLine = [false|true] 是否显示顶部间隔线
	 *   @value false 不显示间隔线，默认
	 *   @value true 显示顶部间隔线
	 * @property {String} img 课程图片
	 * @property {String,Number} type = [0|1] 课程标签类型
	 *   @value 0 选修课程，默认
	 *   @value 1 必修课程
	 * @property {String} caption 课程标题文字
	 * @property {String,Number} obtained 已经获得学分
	 * @property {String,Number} total 课程包含学分
	 * @property {String,Number} state = [0|1|2] 课程学习状态
	 *   @value 0 课程还未学习，默认
	 *   @value 1 课程正在学习中
	 *   @value 2 课程已经学完
	 * @property {String} statxt 学习状态显示文本
	 * @event {Function()} logintouch 登录事务触发
	 */
	export default {
		name: "course-item",
		props: {
			tag: { type: String, default: 'course-item' },
			courseid: { type: [String,Number], default: 0 },
			jieid: { type: [String,Number], default: 0 },
			isLine: { type: [String,Boolean], default: false },
			img: { type: String, default: '' },
			type: { type: [String,Number], default: 0 },
			caption: { type: String, default: '' },
			obtained: { type: [String,Number], default: 0 },
			total: { type: [String,Number], default: 0 },
			state: { type: [String,Number], default: 0 },
			statxt: { type: String, default: '' },
		},
		
		// 组件数据
		data() {
			return {
				// 弹框信息数据
				toast: {
					index: 0, // 显示信息下标
					list: [
						// 真实照片上传提示框
						{
							tag: "photo",
							mode: "primary",
							title: "信息补充",
							content: "观看视频过程中会识别是否本人观看，为了核对您的身份，我们将会采集您的人脸",
							confirmText: '立即采集',
							cancelText: "取消",
						},
						// 摄像头权限授权提示框
						{
							tag: "facethan",
							mode: "primary",
							title: "学习提醒",
							content: "为了核对您的身份，学习课程的过程中会验证是否为本人观看",
							confirmText: null,
							cancelText: "我知道了",
						}
					],
				},
			}
		},
		
		// 页面事件
		methods: {
			
			// =============================================== 元素事件
			// 课程item点击
			itemClick() {
				// 获取临时缓存
				var save_short = uni.$focus.varShortTime('get');
				// 如果已经登录 并且 已经实名 并且 有真实照片
				if (save_short && save_short.id && save_short.is_auth==2 && save_short.scene_img_url && save_short.scene_img_url.length>6)
				{
					// 如果已经进行过“人脸对比”提示
					if (save_short.tips_modal_faceThan == true)
					{
						// 跳转到 视频播放页面
						uni.$focus.pageJump('/pages/course/details/index', {
							courseId: this.courseid, // 课程id
							jieId: this.jieid, // 小节id
						});
					}
					// 没有提示过
					else {
						// 弹出第2类弹框
						this.toast.index = 1;
						// 人脸对比弹框提示
						this.$refs.myModalInfoDjy.open();
					}
				}
				// 进行登录要求 回父
				else if (!save_short || !save_short.id)
				{
					this.$emit('logintouch', { "tag": this.tag });
				}
				// 进行实名认证
				else if (save_short.is_auth!=2)
				{
					// 跳转到 实名认证页面
					uni.$focus.pageJump('/pages/realname/index');
				}
				// 如果未上传真实照片
				else if (!save_short.scene_img_url || save_short.scene_img_url.length<=6)
				{
					// 弹出第1类弹框
					this.toast.index = 0;
					// 人脸对比弹框提示
					this.$refs.myModalInfoDjy.open();
				}
			},
			
			// 模态框确定按钮 点击
			onConfirm(objD) {
				// 只有真实照片上传提示框 才执行
				if (objD.tag == 'photo')
				{
					// 自定义拍照方法调用
					project.cameraCustom({
						type: 'portrait', // 拍照类型： none-无拍照蒙层  portrait-头像拍照  IDCard-身份证拍照
						size: 'middle', // 生成图片尺寸： low-小尺寸  middle-中等尺寸  high-大尺寸
						album: false, // 是否开启相册选图
						success: (photoD) => {
							// 进行人脸检测
							this.userFaceDetectionReq(photoD.data, ()=>{
								
								// 进行图片上传
								request.imgUpload({
									data: {
										file: photoD.path, // 文件资源地址
									},
									success: (res) => {
										// 修改用户真实照片数据
										this.userInfoEditReq(res.id);
									},
								});
								
							});
						},
					});
				}
			},
			
			// 模态框取消按钮 点击
			onCancelCall(objD) {
				// 只有摄像头权限授权提示框 才执行
				if (objD.tag == 'facethan')
				{
					// 临时缓存：进行过“人脸对比”提示
					uni.$focus.varShortTime('set', { "tips_modal_faceThan": true });
					// 是否获取到了摄像头权限
					uni.authorize({
						scope: 'scope.camera',
						fail: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pages/course/details/index', {
								courseId: this.courseid, // 课程id
								jieId: this.jieid, // 小节id
							});
						},
						success: () => {
							// 跳转到 视频播放页面
							uni.$focus.pageJump('/pages/course/details/index', {
								courseId: this.courseid, // 课程id
								jieId: this.jieid, // 小节id
							});
						}
					});
				}
			},
			
			
			// =============================================== 接口请求
			// 人脸检测，参数：base64C-待检测图片base64数据值 callback-识别成功回调
			userFaceDetectionReq(base64C, callback) {
				// 加载框提示
				uni.showLoading({ title: '正在人脸检测' });
				// 人脸检测通用接口api
				request.userFaceDetection({
					data: {
						image_type: 'BASE64', // 图片类型：base64编码后的图片数据，编码后的图片大小不超过2M
						image: base64C, // 图片信息
					},
					fail: () => {
						// 取消加载框
						uni.hideLoading();
						// 错误提示
						uni.showToast({
							title: '人脸检测未通过，请重新采集',
							duration: 2500,
							icon: 'none'
						});
					},
					success: () => {
						// 取消加载框
						uni.hideLoading();
						// 通过了人脸检测 成功回调
						if (callback) { callback(); }
					},
				});
			},
			
			// 修改用户信息，参数：idC-要修改为的id
			userInfoEditReq(idC) {
				// 修改信息请求调用
				request.userInfoEdit({
					data: {
						field_name: 'scene_img', // 具体要修改的项标识：‘真实照片’
						value: idC, // 要修改为的显示结果
					},
					success: (res) => {
						// 加载框提示
						uni.showLoading({ title: '更新用户信息' });
						// 延时执行
						setTimeout(()=>{
							// 重新获取token
							request.tokenGet({
								fail: () => {
									// 取消加载框
									uni.hideLoading();
								},
								success: () => {
									// 取消加载框
									uni.hideLoading();
									// 成功提示
									uni.showToast({
										title: '人脸采集成功',
										duration: 1500,
										icon: 'success'
									});
								}
							});
						}, 500);
					},
				});
			},
			
		},
		
	}
</script>